<%--<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <meta charset="UTF-8">--%>
<%--    <title>注册</title>--%>
<%--    <script type="text/javascript" src="jquery-3.6.0.js"></script> <!-- 正确引用jQuery文件 -->--%>
<%--</head>--%>
<%--<body>--%>

<%--<h1>其他的网页内容 这部分内容无需更新</h1>--%>
<%--<form action="RegisterServlet">--%>
<%--    昵称:<input name="name">--%>
<%--</form>--%>
<%--<h1>注册页面</h1>--%>
<%--<form action="RegisterServlet">--%>
<%--    昵称:<input id="input1" name="name"><span id="span1"></span><br>--%>
<%--    密码：<input type="password" name="password"><br>--%>
<%--    <input type="submit" value="注册">--%>
<%--</form>--%>

<%--<script type="text/javascript">--%>
<%--    $(document).ready(function(){--%>
<%--        $("#input1").blur(function(){--%>
<%--            var name = $.trim($("#input1").val()); // 使用trim去除前后空格--%>
<%--            if (name.length === 0) {--%>
<%--                $("#span1").text("昵称不能为空");--%>
<%--                $("#span1").css("color", "red");--%>
<%--                return;--%>
<%--            }--%>
<%--            $.ajax({--%>
<%--                url: "RegisterServlet",--%>
<%--                data: {"name": name},--%>
<%--                success: function(result) {--%>
<%--                    $("#span1").text(result);--%>
<%--                    if (result === "昵称可用") {--%>
<%--                        $("#span1").css("color", "green");--%>
<%--                    } else {--%>
<%--                        $("#span1").css("color", "red");--%>
<%--                    }--%>
<%--                },--%>
<%--                error: function() {--%>
<%--                    $("#span1").text("检查昵称时发生错误");--%>
<%--                    $("#span1").css("color", "red");--%>
<%--                }--%>
<%--            });--%>
<%--        });--%>
<%--    });--%>
<%--</script>--%>
<%--</body>--%>
<%--</html>--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script> <!-- 正确引用jQuery文件 -->
    <style>
        .container {
            height: 120vh;
            overflow: hidden;
            background-image: url("https://s2.loli.net/2024/06/01/j9emts56SPGwauD.jpg");
            background-size: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
        }
        .input-field {
            width: 100%;
            height: 30px;
            margin-bottom: 20px;
        }
        .register-button {
            width: 100%;
            height: 30px;
            background-color: #28826b;
            border-color: #28826b;
            color: white;
        }
        .error-message {
            color: red;
        }
        .success-message {
            color: green;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="width: 350px; padding: 40px; background-color: white; border-radius: 15px;">
        <div style="text-align: center; font-size: 20px; margin-bottom: 20px; color: #333">欢迎注册</div>
        <form id="registrationForm" action="RegisterServlet" method="post">
            <div style="margin-bottom: 20px;">
                <input type="text" id="input1" name="name" placeholder="请输入账号" class="input-field">
                <span id="span1" class="error-message"></span>
            </div>
            <div style="margin-bottom: 20px;">
                <input type="password" id="password" name="password" placeholder="请输入密码" class="input-field">
            </div>
            <div style="margin-bottom: 20px;">
                <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请确认输入密码" class="input-field">
                <span id="span2" class="error-message"></span>
            </div>
            <div style="margin-bottom: 20px;">
                <input type="submit" value="注册" class="register-button">
            </div>
            <div style="text-align: right">
                已有账号？请 <a href="login.jsp">登录</a>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $("#input1").blur(function(){
            var name = $.trim($("#input1").val()); // 使用trim去除前后空格
            if (name.length === 0) {
                $("#span1").text("账号不能为空");
                return;
            }
            $.ajax({
                url: "RegisterServlet",
                data: {"name": name},
                success: function(result) {
                    $("#span1").text(result);
                    if (result === "账号可用") {
                        $("#span1").removeClass("error-message").addClass("success-message");
                    } else {
                        $("#span1").removeClass("success-message").addClass("error-message");
                    }
                },
                error: function() {
                    $("#span1").text("检查账号时发生错误");
                }
            });
        });

        $("#registrationForm").submit(function(e){
            var password = $("#password").val();
            var confirmPassword = $("#confirmPassword").val();
            if (password !== confirmPassword) {
                $("#span2").text("密码不匹配");
                e.preventDefault(); // 阻止表单提交
            } else {
                $("#span2").text("");
            }
        });
    });
</script>
</body>
</html>